//安环管理系统/环保指标报警管理/当日报警
import React, { Component } from 'react';
import { connect } from 'dva';
import { Card, Icon, Pagination,Table,Dropdown,Menu,Tag} from 'antd';
import style from './IndexDay.less';
import {IndexDayQuery} from '../../../services/redmoe';
import request from '../../../utils/request';
import PublicService from '../../../services/PublicService';
import MyIcon from "../../../components/common/MyIcon";
import moment from "moment"
class IndexDay extends Component {

    state = {
        page:1,
        rows:10,
        rowCount:null,
        tableLoading:false,
        columns:[{
            title: '序号',
            dataIndex: 'num',
            key: 'num',
            align:'center'
          }, {
            title: '环保排放指标名称',
            dataIndex: 'typeName',
            key: 'typeName',
            align:'center'
          }, {
            title: '报警时间',
            dataIndex: 'takeTime',
            key: 'takeTime',
            align:'center'
          },{
            title: '小时均值(mg/m³)',
            dataIndex: 'hourValue',
            key: 'hourValue',
            align:'center'
          }, {
            title: '排放限值(mg/m³)',
            dataIndex: 'maxHigh',
            key: 'maxHigh',
            align:'center'
          }, {
            title: '操作',
            dataIndex: 'caozuo',
            key: 'caozuo',
            align:'center',
            render:(text,record,index) => <Tag size="small"   color="blue" onClick={this.save.bind(this,record)}>详情</Tag>
          }],
          data:[]
    }

    componentDidMount () {
        let data = {
            page:this.state.page,
            rows:this.state.rows,
           
        }
        IndexDayQuery({...data}).then(data => {
            console.log(data)
            data.data.ret.items.forEach(item => {
                item.IndexDayTime = item.takeTime
                item.takeTime=moment(item.takeTime).format("YYYY-MM-DD HH:00")
               
            })
           
            this.setState({
                data:data.data.ret.items,
                rowCount:data.data.ret.rowCount
            })
        })
    }

    //点击详情事件
    save = (record) => {
        console.log(record)
        this.props.history.push("/controlSubject/IndexTransfinite/IndexDayTrend")
        PublicService.setCookie('IndexDayKind', record.typeCode);
        PublicService.setCookie('IndexDayTime', record.IndexDayTime);
        PublicService.setCookie('IndexDayName', record.typeName);
        PublicService.setCookie('IndexDayhourValue', record.hourValue);
        PublicService.setCookie('IndexDaymaxHigh', record.maxHigh);


    }

         //导出按钮
         derive = (e) => {
            if(e.key == "item_0"){
                 //导出本页
                let data = {
                    page:this.state.page,
                    rows:this.state.rows,
                    isAll:false
                }
                 window.location.href =`/hh-management-web/gnhj/environmentalindicatalarm/thisDateAlarmExcelExport?page=${data.page}&rows=${data.rows}&isAll=${data.isAll}`
            } else {
                //导出全部
                let data = {
                    page:this.state.page,
                    rows:this.state.rows,
                    isAll:true
                }
                 window.location.href =`/hh-management-web/gnhj/environmentalindicatalarm/thisDateAlarmExcelExport?page=${data.page}&rows=${data.rows}&isAll=${data.isAll}`
            }
              


      
          }

    //分页器事件
    onShowSizeChange = (page,rows) => {
        this.setState({
            page:page,
            rows:rows,
            tableLoading:true,
            data:[]
           
        })
        setTimeout(() => {
            let data = {
                page:page,
                rows:rows
            }
            IndexDayQuery({...data}).then(data => {
                console.log(data)
                data.data.ret.items.forEach(item => {
                    item.IndexDayTime = item.takeTime
                    item.takeTime=moment(item.takeTime).format("YYYY-MM-DD HH:00")
                   
                })
               
                this.setState({
                    data:data.data.ret.items,
                    rowCount:data.data.ret.rowCount,
                    tableLoading:false
                })
            })
        },100)


    }

        //分页器分页事件
        Pagination = (page,pageSize) => {

            this.setState({
                page:page,
                rows:pageSize,
                tableLoading:true
            })
            //分页后重新发起请求

        setTimeout(() => {
            let data = {
                page:page,
                rows:pageSize
            }
            IndexDayQuery({...data}).then(data => {
                console.log(data)
                data.data.ret.items.forEach(item => {
                    item.IndexDayTime = item.takeTime
                    item.takeTime=moment(item.takeTime).format("YYYY-MM-DD HH:00")
                   
                })
               
                this.setState({
                    data:data.data.ret.items,
                    rowCount:data.data.ret.rowCount,
                    tableLoading:false
                })
            })
        },100)


        }

    render() {

        const menu = (
            <Menu>
              <Menu.Item onClick={this.derive}>
                本页
              </Menu.Item>
              <Menu.Item onClick={this.derive}>
                全部
              </Menu.Item>
             
            </Menu>
          );

        return (
            <div className={style.myTable}>

                        <Card
                            className={style.CardBottom}
                            bodyStyle={{ paddingTop:'2vh'}}
                        >

                        <span className={style.click_span} type="primary">
                            <MyIcon
                                type="icon-webicon320"
                                className={style.MyIcon_webicon320}
                            />
                            <Dropdown overlay={menu}>
                            <span className="ant-dropdown-link">
                            导出 <Icon type="down" />
                            </span>
                        </Dropdown>
                        </span>

                        <div className={style.myTable}>
                        <Table
                            ref="table"
                           
                       
                        
                            loading={this.state.tableLoading}
                            columns={this.state.columns}
                            dataSource={PublicService.transformArrayData(this.state.data,true,true) }
                            align="center"
                            className={style.Table}
                            bordered={true}
                            pagination={false}
                            size="small"
                        />
                        </div>
                     <Pagination
                            showSizeChanger
                            onShowSizeChange={this.onShowSizeChange}
                            showQuickJumper
                            defaultCurrent={1}
                            total={this.state.rowCount}
                            onChange={this.Pagination}
                            className={style.Pagination}
                            size="small"
                        />
                   

                        </Card>
                        </div>
                   
             

        )
    }
}

export default connect()(IndexDay)